<!--
 * @Author       : cxh
 * @Date         : 2021-12-27 22:21:04
 * @LastEditTime : 2021-12-28 21:32:56
 * @LastEditors  : cxh
 * @Description  : 
 * @FilePath     : \vue_WorkSpace\vue-wpt\src\pages\list\components\table\index.vue
-->
<template>
  <div>
    <div class="table-wrap">
      <div class="table-top">
        <div class="table-name flex-center">姓名</div>
        <div class="table-sex flex-center">性别</div>
        <div class="table-lv flex-center">权限级别</div>
        <div class="table-edit flex-center">操作</div>
      </div>
      <div class="table-item" v-for="item in tableDataSource" :key="item.id">
        <div class="table-name flex-center">{{ item.username }}</div>
        <div class="table-sex flex-center">{{ item.gender }}</div>
        <div class="table-lv flex-center">{{ item.permissions }}</div>
        <div class="table-edit flex-center">
          <a class="item-btn" href="#" @click="handleDeleteItem(item)">删除</a>
          <a class="item-btn" href="#">编辑</a>
          <button class="item-btn" @click="goDetail(item.id)">查看详情</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { SEX_MAP } from "./../../config";
export default {
  name: "list-table",
  props: ["userList", "handleDeleteItem"],
  computed: {
    tableDataSource: function () {
      return this.userList.map((item) => ({
        ...item,
        gender: SEX_MAP[item.gender],
      }));
    },
  },
  methods: {
    goDetail: function (id) {
      this.$router.history.push(`/detail?id=${id}`);
    },
  },
};
</script>

<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
